﻿<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>企动聊天IM</title>
    <link rel="stylesheet" href="/plugins/weui/css/weui.min.css" />
    <link rel="stylesheet" href="/plugins/weui/css/example.css" />
    <link rel="stylesheet" href="/static/h5/css/h5.css">
    <style>
        .page.home .page__bd img{width:auto;height:auto;}
        .session-msg{ line-height:25px;font-size: 13px;color: #888888;}
        .session-time{ font-size:13px;}
        .session-count{position: absolute;top: -.4em;right: -.4em;}
        .session-avatar{width: 50px;display: block}
    </style>
</head>
<body ontouchstart>
    <div class="weui-toptips weui-toptips_warn js_tooltips">错误提示</div>
    <!-- 仿微信toast -->
    <div id="toastDialog" style="display:none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-loading weui-icon_toast"></i>
            <p class="weui-toast__content">数据加载中</p>
        </div>
    </div>

    <!--body容器-->
    <div class="container" id="container"></div>

    <script type="text/html" id="tpl_home">
        <div class="page">
            <div class="weui-tab">
                <div class="weui-tab__panel">
                    <!--聊天会话列表-->
                    <div class="weui-cells im-session-list">
                        <div class="pop__chat-msg-notice im-loading" style="text-align:center;margin: 10px; font-size:13px;">
                            <span><i class="pop__loading"></i>加载中...</span>
                        </div>
                    </div>
                </div>

                <div class="weui-tabbar">
                    <a href="javascript:;" class="weui-tabbar__item weui-bar__item_on">
                        <span style="display: inline-block;position: relative;">
                            <img src="http://weijieke.711688.net.cn/admin_wjk/images/tabbar/10.png" alt="" class="weui-tabbar__icon">
                            <span class="weui-badge im-totalcount" style="position: absolute;top: -2px;right: -13px;display:none">0</span>
                        </span>
                        <p class="weui-tabbar__label">消息</p>
                    </a>
                    <a href="javascript:;" class="weui-tabbar__item">
                        <img src="http://weijieke.711688.net.cn/admin_wjk/images/tabbar/12.png" alt="" class="weui-tabbar__icon">
                        <p class="weui-tabbar__label">通讯录</p>
                    </a>
                    <a href="javascript:;" class="weui-tabbar__item">
                        <span style="display: inline-block;position: relative;">
                            <img src="http://weijieke.711688.net.cn/admin_wjk/images/tabbar/14.png" class="weui-tabbar__icon">             
                        </span>
                        <p class="weui-tabbar__label">商圈</p>
                    </a>
                    <a href="javascript:;" class="weui-tabbar__item">
                        <img src="http://weijieke.711688.net.cn/admin_wjk/images/tabbar/18.png" alt="" class="weui-tabbar__icon">
                        <p class="weui-tabbar__label">我的</p>
                    </a>
                </div>
            </div>

               
            <!--
            <div class="page__ft">
                <a href="javascript:home()" style="color:#999">企动IM</a>
            </div>-->
        </div>
    </script>
    
    <script type="text/html" id="tpl_im_detail">      
    <div class="page">
        <!-- 聊天容器 -->
        <div id="chat" class="pop__panel pop__clearfix">
            <div class="pop__chat-wrapper pop__flexbox">
                <div class="pop__header">
                    <div class="pop__header-wrapper pop__flexbox">
                        <a href="javascript:;" onclick="history.back(-1);" class="pop__header-back"></a>
                        <h2 class="pop__header-title pop__flex1 pop__clamp1 im-name"></h2>
                        <a href="javascript:" class="pop__dot-more" title="更多资料"></a>
                    </div>
                </div> 
                <div class="pop__chat-msg-panel pop__flex1" id="chat-box" style="overflow-y:auto;overflow-x:hidden;">
                    <div class="pop__chat-content">
                        <!--消息列表-->
                        <ul class="pop__clearfix im-msg-list">                              
                            <li class="pop__chat-msg-notice im-loading" style="display:none"><span><i class="pop__loading"></i>加载中...</span></li>
                            <li class="pop__chat-msg-notice im-no-data" style="display: none;"><span>没有更多消息</span></li>                                
                        </ul>
                    </div>
                </div>
                <!--发送、表情-->
                <div class="pop__chat-tool-panel">
                    <div class="pop__editor-panel pop__border-top pop__flexbox">
                        <i class="pop__btn pop__btn-voice" style=""></i> <i class="pop__btn pop__btn-keyboard" style="display: none;"></i>
                        <input class="pop__chat-tool-editor pop__user-select" style="width: 4.34rem;" onkeyup="changeContent()" />
                        <input type="button" value="按住 说话" class="pop__chat-tool-editor pop__none-user-select" style="width: 4.34rem; display: none;">
                        <i class="pop__btn pop__btn-emotion" onclick="showFace(0)"></i>
                        <i class="pop__btn pop__btn-choose" onclick="showFace(1)"></i>
                        <button class="pop__btn pop__btn-submit" style="display:none" onclick="sendMsg()">发送</button>                  
                    </div>

                    <div class="pop__choose-panel pop__border-top" style="display:none">
                        <div class="pop__emotion-wrapper" style="display: none;">
                            <div class="pop__emotion__cells pop__flexbox">
                                <div class="pop__emotion__cells-swiper pop__flex1">
                                    <div id="pop__emotion" class="swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide swiper-slide-active" style="width: 375px;">
                                                <div class="pop__face-list">
                                                    <span><img class="face" src="/static/h5/img/emotion/face01/0.png" title="[表情0]"></span><span><img class="face" src="/static/h5/img/emotion/face01/1.png" title="[表情1]"></span><span><img class="face" src="/static/h5/img/emotion/face01/2.png" title="[表情2]"></span><span><img class="face" src="/static/h5/img/emotion/face01/3.png" title="[表情3]"></span><span><img class="face" src="/static/h5/img/emotion/face01/4.png" title="[表情4]"></span><span><img class="face" src="/static/h5/img/emotion/face01/5.png" title="[表情5]"></span><span>
                                                        <img class="face" src="/static/h5/img/emotion/face01/6.png" title="[表情6]">
                                                    </span><span><img class="face" src="/static/h5/img/emotion/face01/7.png" title="[表情7]"></span><span>
                                                        <img class="face" src="/static/h5/img/emotion/face01/8.png" title="[表情8]">
                                                    </span><span><img class="face" src="/static/h5/img/emotion/face01/9.png" title="[表情9]"></span><span><img class="face" src="/static/h5/img/emotion/face01/10.png" title="[表情10]"></span><span><img class="face" src="/static/h5/img/emotion/face01/11.png" title="[表情11]"></span><span><img class="face" src="/static/h5/img/emotion/face01/12.png" title="[表情12]"></span><span><img class="face" src="/static/h5/img/emotion/face01/13.png" title="[表情13]"></span><span><img class="face" src="/static/h5/img/emotion/face01/14.png" title="[表情14]"></span><span><img class="face" src="/static/h5/img/emotion/face01/15.png" title="[表情15]"></span><span><img class="face" src="/static/h5/img/emotion/face01/16.png" title="[表情16]"></span><span>
                                                        <img class="face" src="/static/h5/img/emotion/face01/17.png" title="[表情17]">
                                                    </span><span><img class="face" src="/static/h5/img/emotion/face01/18.png" title="[表情18]"></span><span><img class="face" src="/static/h5/img/emotion/face01/19.png" title="[表情19]"></span><span><img class="face" src="/static/h5/img/emotion/face01/20.png" title="[表情20]"></span>
                                                </div>
                                            </div>
                                            <!--其他表情-->
                                            <!--
                                                <div class="swiper-slide swiper-slide-next" style="width: 375px;">
                                                    <div class="pop__face-list">
                                                        <span><img class="face" src="/static/h5/img/emotion/face01/21.png" title="[表情21]"></span><span><img class="face" src="/static/h5/img/emotion/face01/22.png" title="[表情22]"></span><span><img class="face" src="/static/h5/img/emotion/face01/23.png" title="[表情23]"></span><span><img class="face" src="/static/h5/img/emotion/face01/24.png" title="[表情24]"></span><span><img class="face" src="/static/h5/img/emotion/face01/25.png" title="[表情25]"></span><span><img class="face" src="/static/h5/img/emotion/face01/26.png" title="[表情26]"></span><span><img class="face" src="/static/h5/img/emotion/face01/27.png" title="[表情27]"></span><span><img class="face" src="/static/h5/img/emotion/face01/28.png" title="[表情28]"></span><span>
                                                            <img class="face" src="/static/h5/img/emotion/face01/29.png" title="[表情29]">
                                                        </span><span><img class="face" src="/static/h5/img/emotion/face01/30.png" title="[表情30]"></span><span><img class="face" src="/static/h5/img/emotion/face01/31.png" title="[表情31]"></span><span><img class="face" src="/static/h5/img/emotion/face01/32.png" title="[表情32]"></span><span><img class="face" src="/static/h5/img/emotion/face01/33.png" title="[表情33]"></span><span><img class="face" src="/static/h5/img/emotion/face01/34.png" title="[表情34]"></span><span><img class="face" src="/static/h5/img/emotion/face01/35.png" title="[表情35]"></span><span><img class="face" src="/static/h5/img/emotion/face01/36.png" title="[表情36]"></span><span><img class="face" src="/static/h5/img/emotion/face01/37.png" title="[表情37]"></span><span><img class="face" src="/static/h5/img/emotion/face01/38.png" title="[表情38]"></span><span><img class="face" src="/static/h5/img/emotion/face01/39.png" title="[表情39]"></span><span><img class="face" src="/static/h5/img/emotion/face01/40.png" title="[表情40]"></span><span><img class="face" src="/static/h5/img/emotion/face01/41.png" title="[表情41]"></span>
                                                    </div>
                                                </div>
                                                <div class="swiper-slide" style="width: 375px;">
                                                    <div class="pop__face-list">
                                                        <span><img class="face" src="/static/h5/img/emotion/face01/42.png" title="[表情42]"></span><span><img class="face" src="/static/h5/img/emotion/face01/43.png" title="[表情43]"></span><span><img class="face" src="/static/h5/img/emotion/face01/44.png" title="[表情44]"></span><span><img class="face" src="/static/h5/img/emotion/face01/45.png" title="[表情45]"></span><span><img class="face" src="/static/h5/img/emotion/face01/46.png" title="[表情46]"></span><span><img class="face" src="/static/h5/img/emotion/face01/47.png" title="[表情47]"></span><span><img class="face" src="/static/h5/img/emotion/face01/48.png" title="[表情48]"></span><span><img class="face" src="/static/h5/img/emotion/face01/49.png" title="[表情49]"></span><span><img class="face" src="/static/h5/img/emotion/face01/50.png" title="[表情50]"></span><span><img class="face" src="/static/h5/img/emotion/face01/51.png" title="[表情51]"></span><span><img class="face" src="/static/h5/img/emotion/face01/52.png" title="[表情52]"></span><span><img class="face" src="/static/h5/img/emotion/face01/53.png" title="[表情53]"></span><span><img class="face" src="/static/h5/img/emotion/face01/54.png" title="[表情54]"></span><span><img class="face" src="/static/h5/img/emotion/face01/55.png" title="[表情55]"></span><span>
                                                            <img class="face" src="/static/h5/img/emotion/face01/56.png" title="[表情56]">
                                                        </span><span><img class="face" src="/static/h5/img/emotion/face01/57.png" title="[表情57]"></span><span><img class="face" src="/static/h5/img/emotion/face01/58.png" title="[表情58]"></span><span><img class="face" src="/static/h5/img/emotion/face01/59.png" title="[表情59]"></span><span><img class="face" src="/static/h5/img/emotion/face01/60.png" title="[表情60]"></span><span><img class="face" src="/static/h5/img/emotion/face01/61.png" title="[表情61]"></span><span><img class="face" src="/static/h5/img/emotion/face01/62.png" title="[表情62]"></span>
                                                    </div>
                                                </div>
                                                <div class="swiper-slide" style="width: 375px;">
                                                    <div class="pop__face-list">
                                                        <span><img class="face" src="/static/h5/img/emotion/face01/63.png" title="[表情63]"></span><span><img class="face" src="/static/h5/img/emotion/face01/64.png" title="[表情64]"></span><span><img class="face" src="/static/h5/img/emotion/face01/65.png" title="[表情65]"></span><span><img class="face" src="/static/h5/img/emotion/face01/66.png" title="[表情66]"></span><span><img class="face" src="/static/h5/img/emotion/face01/67.png" title="[表情67]"></span><span><img class="face" src="/static/h5/img/emotion/face01/68.png" title="[表情68]"></span><span><img class="face" src="/static/h5/img/emotion/face01/69.png" title="[表情69]"></span>
                                                        <span><img class="face" src="/static/h5/img/emotion/face01/70.png" title="[表情70]"></span><span><img class="face" src="/static/h5/img/emotion/face01/71.png" title="[表情71]"></span><span><img class="face" src="/static/h5/img/emotion/face01/72.png" title="[表情72]"></span><span><img class="face" src="/static/h5/img/emotion/face01/73.png" title="[表情73]"></span><span><img class="face" src="/static/h5/img/emotion/face01/74.png" title="[表情74]"></span><span><img class="face" src="/static/h5/img/emotion/face01/75.png" title="[表情75]"></span><span><img class="face" src="/static/h5/img/emotion/face01/76.png" title="[表情76]"></span><span><img class="face" src="/static/h5/img/emotion/face01/77.png" title="[表情77]"></span><span><img class="face" src="/static/h5/img/emotion/face01/78.png" title="[表情78]"></span><span><img class="face" src="/static/h5/img/emotion/face01/79.png" title="[表情79]"></span><span><img class="face" src="/static/h5/img/emotion/face01/80.png" title="[表情80]"></span><span><img class="face" src="/static/h5/img/emotion/face01/81.png" title="[表情81]"></span><span><img class="face" src="/static/h5/img/emotion/face01/82.png" title="[表情82]"></span><span><img class="face" src="/static/h5/img/emotion/face01/83.png" title="[表情83]"></span>
                                                    </div>
                                                </div>
                                                <div class="swiper-slide" style="width: 375px;">
                                                    <div class="pop__face-list">
                                                        <span>
                                                            <img class="face" src="/static/h5/img/emotion/face01/84.png" title="[表情84]">
                                                        </span><span><img class="face" src="/static/h5/img/emotion/face01/85.png" title="[表情85]"></span><span><img class="face" src="/static/h5/img/emotion/face01/86.png" title="[表情86]"></span><span><img class="face" src="/static/h5/img/emotion/face01/87.png" title="[表情87]"></span><span><img class="face" src="/static/h5/img/emotion/face01/88.png" title="[表情88]"></span><span><img class="face" src="/static/h5/img/emotion/face01/89.png" title="[表情89]"></span><span><img class="face" src="/static/h5/img/emotion/face01/90.png" title="[表情90]"></span><span><img class="face" src="/static/h5/img/emotion/face01/91.png" title="[表情91]"></span><span><img class="face" src="/static/h5/img/emotion/face01/92.png" title="[表情92]"></span><span><img class="face" src="/static/h5/img/emotion/face01/93.png" title="[表情93]"></span><span><img class="face" src="/static/h5/img/emotion/face01/94.png" title="[表情94]"></span><span><img class="face" src="/static/h5/img/emotion/face01/95.png" title="[表情95]"></span><span><img class="face" src="/static/h5/img/emotion/face01/96.png" title="[表情96]"></span><span><img class="face" src="/static/h5/img/emotion/face01/97.png" title="[表情97]"></span><span><img class="face" src="/static/h5/img/emotion/face01/98.png" title="[表情98]"></span><span>
                                                            <img class="face" src="/static/h5/img/emotion/face01/99.png" title="[表情99]">
                                                        </span><span><img class="face" src="/static/h5/img/emotion/face01/100.png" title="[表情100]"></span>
                                                    </div>
                                                </div>
                                                -->
                                        </div>

                                        <div class="pop__emotion-pagination swiper-pagination-clickable swiper-pagination-bullets">
                                            <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
                                            <span class="swiper-pagination-bullet"></span>
                                            <span class="swiper-pagination-bullet"></span>
                                            <span class="swiper-pagination-bullet"></span>
                                            <span class="swiper-pagination-bullet"></span>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="pop__choose-wrapper" style="display: none;">
                            <ul class="pop__clearfix">
                                <li style="">
                                    <a href="javascript:;">
                                        <span class="pop__avatar">
                                            <i class="layui-icon layui-icon-image"></i>
                                            <form><input type="file" accept="image/*"></form>
                                        </span><em>照片</em>
                                    </a>
                                </li>
                                <li style="">
                                    <a href="javascript:;">
                                        <span class="pop__avatar">
                                            <i class="layui-icon"></i>
                                            <form><input type="file" accept="*"></form>
                                        </span><em>文件</em>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>   
    </div>
    </script>

    <script src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
    <script src="/plugins/weui/js/zepto.min.js"></script>
    <script src="/plugins/weui/js/example.js"></script>
    <script src="/static/h5/js/fontSize.js"></script>
    <script src="/static/h5/js/im.config.js"></script>
    <script src="/static/h5/js/im.js"></script>

    <script type="text/javascript">
        
        $(function () {
            if (!isLogin()) return;
          
            //var action = getQueryString("action");
            //if (action == "addsession") {
            //    var fromUid = getQueryString("fromuid");
            //    var toUid = getQueryString("fromuid");
            //}
            

            QDChat.SessionList();
        });

        //选择表情、文件
        function showFace(index) {
            var isShow = false;
            var _index = 0;
            $(".pop__choose-panel").children().each(function () {
                if (_index == index) {
                    if ($(this).css("display") == "none") {
                        isShow = true;
                        $(this).css("display", "");
                    }
                    else {
                        isShow = false;
                        $(this).css("display", "none");
                    }
                }
                else
                    $(this).css("display", "none");
                _index++;
            });
            if (isShow)
                $(".pop__choose-panel").show();
            else
                $(".pop__choose-panel").hide();
        }

        //文字输入
        function changeContent() {
            if ($(".pop__chat-tool-editor").val().length > 0)
                $(".pop__btn-submit").show();
            else
                $(".pop__btn-submit").hide();
        }

        //发送
        function sendMsg() {
            var msg = $(".pop__chat-tool-editor").val();
            var sendType = 1;
            if (trim(msg) == '') {
                return;
            }
            if (msgUser.fromUser == null || msgUser.fromUser.Id < 1) {
                Alert('发送人不能为空');
                return;
            }
            if (msgUser.toUser == null || msgUser.toUser.Id < 1) {
                Alert('接收人不能为空');
                return;
            }

            QDChat.sendMsg(msgUser.fromUser.Id, msgUser.toUser.Id, msg, sendType);
            imClient.sendMsg(msgUser.fromUser.Id, msgUser.toUser.Id, msg);

            //清空文本框消息
            $(".pop__chat-tool-editor").val("");

            //发送人: 显示会话
            bindData.appendSession(msgUser.fromUser.Id, msgUser.toUser.Id, msg, 1);
        }
    </script>
</body>
</html>
